<template>
	<div>
		<main>
			<router-view/>
		</main>
		<footer style="margin-bottom: 50px;" v-show="tabbar">
			<van-tabbar v-model="active" active-color="#ee0a24">
				<van-tabbar-item icon="home-o">
				  <router-link to="/">推荐</router-link>
				</van-tabbar-item>
			  <van-tabbar-item icon="smile-comment-o">社区</van-tabbar-item>
			  <van-tabbar-item>
				  <van-icon name="add" size="40" id="add"/>
			  </van-tabbar-item>
			  <van-tabbar-item icon="hotel-o">酒店</van-tabbar-item>
			  <van-tabbar-item icon="user-o">我的</van-tabbar-item>
			</van-tabbar>
		</footer>
		<div v-if="ai">
			<van-floating-bubble axis="xy" icon="chat" magnetic="x" id="chat" v-model:offset="offset" @click="this.$router.push({path:'/ai_session'})"/>
		</div>
	</div>

</template>

<script>
	export default{
		data(){
			return{
				active: 0,
				offset: { x: 330, y: 620 },
			}
		},
		computed:{
			tabbar(){
				return this.$store.state.tabbarShow;
			},
			ai(){
				return this.$store.state.aiShow;
			}
		},
	}
</script>

<style>
	*{
		margin:0px;
		padding:0px;
	}
	#add{
		color:red;
	}
	body{
		background: linear-gradient(to bottom, #ffffff, #eaeaea);
		height:100%;
		min-height:100vh;
	}
	#chat{
		background:red;
	}
	.padding{
		padding:10px;
	}
	
	.ellipsis {
	   white-space: nowrap; /* 不换行 */
	   overflow: hidden; /* 超出部分隐藏 */
	   text-overflow: ellipsis; /* 显示省略号 */
	}
</style>
